<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>socket 通信后端测试页面</h1>
  <div class="content" style="height: 500px;overflow:auto;">

    <div class="box"></div>

  </div>


  姓名：<input  class="username" />
  内容：<input  class="chartContent" />


  <button id="btn">按钮</button>

  <script src="./socket.io.js"></script>
  <script src="./axios.js"></script>
  <script>

    const username = document.querySelector('.username')
    const chartContent = document.querySelector('.chartContent')
    const contentDom = document.querySelector('.content')
    const box = document.querySelector('.box')


    const socket = io('http://localhost:8000')



    // 1. 更进入页面，请求聊天数据接口。渲染

    axios.get('/users/getRecords?userId=17&brokerId=18').then(res => {
      console.log('res:', res)
      box.innerHTML = renderHtml(res.data.data)
    })

    function renderHtml(list) {
      return list.map(item => {
        return `<ul>
                  <li>
                    ${item.userId}
                  </li>
                  <li> ${item.content} </li>
                </ul>`
      })
    }

    btn.onclick = function() {
      socket.emit('sendMsg', {
        userId: 17,
        brokerId: 18,
        content:  chartContent.value.trim(),
        submitId: 18
      })
    }

    socket.on('sendMsg', (res) => {
      console.log('res:', res)
      box.innerHTML = renderHtml(res.getRecords)
    })



  </script>
</body>
</html>
